﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link href="../css/mui/mui.min.css" rel="stylesheet" />
    <link href="../css/mui/mui.indexedlist.css" rel="stylesheet" />
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
            font-family: 'Microsoft YaHei';
        }

        .mui-bar {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        #done.mui-disabled {
            color: gray;
        }
    </style>
    <title>视频搜索</title>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: gray;" ></a>
        <h1 class="mui-title">选择类别</h1>
        <a id="done" class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled">完成</a>
    </header>
    <div class="mui-content">
        <div id='list' class="mui-indexed-list">
            <div class="mui-indexed-list-search mui-input-row mui-search">
                <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
            </div>
            <div class="mui-indexed-list-bar">
                <a>A</a>
                <a>B</a>
                <a>C</a>
                <a>D</a>
                <a>E</a>
                <a>F</a>
                <a>G</a>
                <a>H</a>
                <a>I</a>
                <a>J</a>
                <a>K</a>
                <a>L</a>
                <a>M</a>
                <a>N</a>
                <a>O</a>
                <a>P</a>
                <a>Q</a>
                <a>R</a>
                <a>S</a>
                <a>T</a>
                <a>U</a>
                <a>V</a>
                <a>W</a>
                <a>X</a>
                <a>Y</a>
                <a>Z</a>
            </div>
            <div class="mui-indexed-list-alert"></div>
            <div class="mui-indexed-list-inner">
                <div class="mui-indexed-list-empty-alert">没有数据</div>
                <ul class="mui-table-view">
                    <li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
                    <li data-value="AJ" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />AngularJS
                    </li>
                    <li data-value="ASPNET" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />ASP.NET
                    </li>
                    <li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
                    <li data-value="BOX" data-tags="BaoShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />BOX
                    </li>
                    <li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
                    <li data-value="COS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />Core OS
                    </li>
                    <li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
                    <li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />Django
                    </li>
                    <li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
                    <li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />Easy UI
                    </li>
                    <li data-value="ENH" data-tags="EnShiXuJiaPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />Easy Map
                    </li>
                    <li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
                    <li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />FastDB
                    </li>
                    <li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
                    <li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
                    <li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />Hash算法
                    </li>
                    <li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
                    <li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />JAVA基础
                    </li>
                    <li data-value="JNG" data-tags="JiNingQuFu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />JAVA进阶
                    </li>
                    <li data-value="JXA" data-tags="JiXiXingKaiHu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />JAVA后期
                    </li>
                    <li data-value="JMU" data-tags="JiaMuSiDongJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />JavaScript
                    </li>
                    <li data-value="JGN" data-tags="JiaYuGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />JQuery
                    </li>
                    <li data-value="JNZ" data-tags="JinZhouXiaoLingZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />JQuery Mobile
                    </li>
                    <li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
                    <li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
                    <li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
                    <li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
                    <li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />NetSpace
                    </li>
                    <li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
                    <li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />Perl
                    </li>
                    <li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
                    <li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
                    <li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />R语言
                    </li>
                    <li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
                    <li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />Safe
                    </li>
                    <li data-value="SWA" data-tags="ShanTouWaiSha" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />Spring
                    </li>
                    <li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
                    <li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
                    <li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
                    <li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />X-Code
                    </li>
                    <li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
                    <li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />易语言
                    </li>
                    <li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
                    <li data-value="ZHA" data-tags="ZhanJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />智能网络
                    </li>
                    <li data-value="ZAT" data-tags="ZhaoTong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                        <input type="checkbox" />智能出行
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="../js/mui.min.js"></script>
    <script src="../js/mui.indexedlist.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        mui.ready(function () {
            var header = document.querySelector('header.mui-bar');
            var list = document.getElementById('list');
            var done = document.getElementById('done');
            //calc hieght
            list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
            //create
            window.indexedList = new mui.IndexedList(list);
            //done event
            done.addEventListener('tap', function () {
                var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
                var checkedValues = [];
                checkboxArray.forEach(function (box) {
                    if (box.checked) {
                        checkedValues.push(box.parentNode.innerText);
                    }
                });
                if (checkedValues.length > 0) {
                    //mui.alert('你选择了: ' + checkedValues);
                    location.href = "视频列表.html";
                } else {
                    mui.alert('你没选择任何机场');
                }
            }, false);
            mui('.mui-indexed-list-inner').on('change', 'input', function () {
                var count = list.querySelectorAll('input[type="checkbox"]:checked').length;
                var value = count ? "完成(" + count + ")" : "完成";
                done.innerHTML = value;
                if (count) {
                    if (done.classList.contains("mui-disabled")) {
                        done.classList.remove("mui-disabled");
                    }
                } else {
                    if (!done.classList.contains("mui-disabled")) {
                        done.classList.add("mui-disabled");
                    }
                }
            });
        });
    </script>
</body>
</html>